<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		body{
			height: 1000px;
		}
			*{
				margin:0;
				padding:0;
				
			}
			li{
				list-style: none;
			}
			
			.box{
				width: 1210px;
				height: 48px;
				background-color: #e8e7e3;
			    margin:50px  auto;
			    /*
			     粘滞定位：
			     -当元素的position属性设置为sticky时则开启了与三俗的粘滞定位
			     -粘滞定位和相对定位的特点基本一致
			         不同的是粘滞定位可以再元素到达某个位置时将其固定
			     * 
			     * 兼容性不是很好。IE浏览器都不支持
			     * */
			    
			 /*   position:sticky;*/
			    top:10px;
			  
			}
			.box a{
				display: block;
				text-decoration: none;
				color:#80807f ;
				font-size: 20px;
				padding: 0 34px;
				
			}
			ul li{
				float: left;
				line-height: 48px;
			
			}
		.box a:hover{
				height: 48px;
				background-color: #000000;
				color: #e9e9e6;
			}
			.box li:last-child a{
				padding: 0 46px 0 38px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><a href="#">HTML/CSS</a></li>
				<li><a href="#">Brower Side</a></li>
				<li><a href="#">Service Side</a></li>
				<li><a href="#">Programing</a></li>
				<li><a href="#">XML</a></li>
				<li><a href="#">Wide Building</a></li>
				<li><a href="#">Reference</a></li>
				
			</ul>
		
		</div>
	</body>
</html>
